import React, { Component } from 'react'

export default class Item extends Component {
  state = {mouse: false}
  changeItemState = (id)=>{
    return (event)=>{
      this.props.changeItem(id, event.target.checked)
    }
  }
  deleteItem = (itemId)=>{
    return ()=>{
      this.props.deleteItem(itemId)
    }
  }
  handleMouse = (mouse)=>{
    return ()=>{
      this.setState({mouse:mouse})
    }
  }
  render() {
    const {id,name,done} = this.props
    const {mouse} = this.state
    return (
        <li style={{backgroundColor: mouse?'#ddd':'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
          <input type="checkbox" checked={done} onChange={this.changeItemState(id)}/>
          <span>{name}</span>
          <button style={{display: mouse?'inline-block':'none'}} onClick={this.deleteItem(id)}>删除</button>
        </li>
    )
  }
}
